<template>
  <div>

    <basic-container>
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true" :model="formInline" >
        <div style="margin-top: 22px">
          <el-form-item >
            <el-input v-model="formInline.account" clearable placeholder="会员账号"></el-input>
          </el-form-item>
          <el-form-item >
            <el-input v-model="formInline.realName" clearable placeholder="真实姓名"></el-input>
          </el-form-item>
          <el-form-item >
            <el-input v-model="formInline.phone" clearable placeholder="手机号"></el-input>
          </el-form-item>
          <el-form-item >
            <el-select v-model="formInline.status" clearable placeholder="账号状态">
              <el-option label="锁定" value="2"></el-option>
              <el-option label="正常" value="1"></el-option>
              <el-option label="离职" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-select v-model="formInline.userPid" clearable placeholder="组长账号">
              <el-option
                v-for="item in lead"
                :key="item.id"
                :label="item.account"
                :value="item.id"/>
            </el-select>

          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button type="danger" icon="el-icon-edit" @click="addHeadMen">新增推广员</el-button>
          </el-form-item>

        </div>
      </el-form>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="ID">
        </el-table-column>
        <el-table-column
          prop="account"
          label="账号">
        </el-table-column>
        <el-table-column
          prop="paccount"
          label="组长账号">
        </el-table-column>
        <el-table-column
          prop="realName"
          label="真实姓名">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码">
        </el-table-column>
        <el-table-column
          prop="address"
          label="会员状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1"><span class="skucost-pruice">正常</span></span>
            <span v-else-if="scope.row.status==2"><span style="color: red" class="skucost-pruice">锁定</span></span>
            <span v-else><span style="color: red" class="skucost-pruice">离职</span></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="注册时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="300"
          icon="el-icon-s-tools"
          align="center">
          <template slot-scope="scope" align="center">

            <div v-if="scope.row.status==3">
              <el-button @click="recover(scope.row,1,'复职')" type="text" size="medium">复职</el-button>
            </div>
            <div v-else>
              <el-button @click="handleClick(scope.row)" type="text" size="medium">修改</el-button>
              <el-dropdown style="margin-left: 5px">
                    <span class="el-dropdown-link">
                      下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-if="scope.row.status==1" @click.native="recover(scope.row,2,'冻结')">冻结
                  </el-dropdown-item>
                  <el-dropdown-item v-if="scope.row.status==2" @click.native="recover(scope.row,1,'解冻')">解冻
                  </el-dropdown-item>
                  <el-dropdown-item @click.native="reset(scope.row)">重置密码</el-dropdown-item>
                  <el-dropdown-item @click.native="recover(scope.row,3,'离职')">离职</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

          </template>
        </el-table-column>
      </el-table>

      <div class="block" style="margin-top: 20px;">

        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </div>


      <el-dialog :title="mode"   :visible.sync="dialogFormVisible"  @close="closeDialog()" customClass="customWidthUser">
        <div v-if="dialogFormVisible">
          <el-form :model="form" :rules="rules" label-width="100px"  class="demo-ruleForm" ref="ruleForm" >
            <el-form-item label="组长账号" v-if="mode=='新增'" >
              <el-select v-model="form.userPid" placeholder="组长账号">
                <el-option
                  v-for="item in lead"
                  :key="item.id"
                  :label="item.account"
                  :value="item.id"/>
              </el-select>
            </el-form-item>
            <el-form-item label="账号" :required="true" prop="account">
              <el-input v-model="form.account" autocomplete="off" placeholder="请输入账号"
                        :disabled=" mode=='编辑' ? true : false "></el-input>
            </el-form-item>
            <el-form-item v-if="mode=='新增'" label="密码" prop="password">
              <el-input v-model="form.password" type="password" autocomplete="off" auto-complete="new-password"
                        placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
              <el-input v-model="form.realName" autocomplete="off" placeholder="请输入真实姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="form.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="账号状态">
              <el-checkbox v-model="status" @change="setStatus">锁定用户</el-checkbox>
            </el-form-item>
            <el-form-item label="">
              <el-checkbox v-model="privacy" @change="setPrivacy">
                <span style="color: #409EFF;text-decoration:underline;">用户条款</span>
              </el-checkbox>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="suer('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog title="重置密码" :visible.sync="dialogpasswordVisible" @close="closepasswordDialog()"
                 customClass="customWidthUser">
        <div v-if="dialogpasswordVisible">
          <el-form :model="passWord" :rules="rules" label-width="100px" class="demo-ruleForm" ref="ruleForm2">
            <el-form-item label="新密码" prop="password">
              <el-input v-model="passWord.password" type="password" autocomplete="off"
                        auto-complete="new-password"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogpasswordVisible = false">取 消</el-button>
          <el-button type="primary" @click="passwordsuer('ruleForm2')">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog
        title="用户条款"
        :visible.sync="privacyDio"
        width="30%">
        <div>
          <div v-html="privacyMsg" style="height: 500px ;overflow-y:auto;overflow-x:hidden;"></div>
        </div>
      </el-dialog>
    </basic-container>

  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {
  getLeadList,
  getPromoteLeadList,
  promoteAdd,
  promoteRevise,
  restPromote
} from "@/api/system/user";
import VueElementLoading from 'vue-element-loading'

export default {
  name: "promoter",
  data() {
    let validPassword=(rule,value,callback)=>{
      let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
      if(!reg.test(value)){callback(new Error('密码必须是由4-20位字母+数字组合'))
      }else{
        callback()
      }
    };
    let validPhone=(rule,value,callback)=>{
      let reg= /^1(3|4|5|6|7|8|9)\d{9}$/
      if(!reg.test(value)&&value!=''){callback(new Error('请输入正确手机号码'))
      }else{
        callback()
      }
    };
    return {
      isActive: false,
      lead:[],
      loading : true,
      formInline: {
        account: '',
        realName: '',
        status: '',
        phone: '',
        userPid:'',
      },
      mode:'',
      status:false,
      privacyDio:false,
      privacy:false,
      privacyMsg:'',
      dialogFormVisible: false,
      dialogpasswordVisible: false,
      form: {
        id: '',
        account: '',
        password: '',
        realName: '',
        phone: '',
        name: '',
        userPid:'',
        status: 1,
        privacy:1,
        level: 4,
        tenantId: '731030',
        roleId: '5',
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      state: {
        id: '',
        status: 1,
      },
      passWord: {
        id: '',
        password: '',
      },
      rules: {
        account: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {validator: validPassword, trigger: 'blur'}
        ],
        phone: [
          {validator: validPhone, trigger: 'blur'}
        ],
      },
      leadlevel: 3,//组长等级
      level: 4,//推广员等级
      formLabelWidth: '80px',
      currentPage4: 4,
      tableData:[],
    };

  },
  components: {
    VueElementLoading
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },

  created() {
    this.nowPromoteload();
    this.nowload(this.leadlevel);
    this.initprivacyMsg()
  },
  methods: {
    setStatus(ev) {
      this.form.status = ev ? 2 : 1;
    },
    setPrivacy(ev){
      this.privacyDio = ev
      this.form.privacy = ev ? 2 : 1;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      this.nowPromoteload()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      this.nowPromoteload()
    },
    addHeadMen(){
      this.privacy = false
      this.dialogFormVisible=true;
      this.mode='新增';
    },
    handleClick(row){
      this.privacy = true
      console.log("row",row)
      this.dialogFormVisible=true;
      this.mode='编辑';
      this.form.account = row.account;
      this.$set(this.form, 'id', row.id);
      this.$set(this.form, 'realName', row.realName);
      this.$set(this.form, 'password', row.password);
      this.$set(this.form, 'phone', row.phone);
      this.$set(this.form, 'name', row.name);
      if (row.status == 2) {
        this.status = true
      } else {
        this.status = false
      }
    },
    /* 关闭清空表单 */
    closeDialog() {
      this.status=false
      this.form = {},
        this.form.status = 1,
        this.form.level = 4,
        this.form.tenantId = '731030',
        this.form.roleId = '5',
        this.dialogFormVisible = false;
      this.privacy = false
    },
    /* 关闭清空表单 */
    closepasswordDialog() {
      this.passWord = {},
        this.dialogpasswordVisible = false;
    },
    /* 确定 */
    suer(ruleForm) {
      if(this.form.userPid==''&&this.mode == '新增'){
        this.$message({
          type: "error",
          message: "请选择组长"
        });
           return;
      }
      this.$refs[ruleForm].validate((valid) => {
        if(this.form.privacy != 2) {
          this.$message({
            type: "error",
            message: "请勾选并认真阅读用户条款!"
          });
          return
        }
        if (valid) {
          this.dialogFormVisible = false;
          this.status=false
          if (this.mode == '新增') {
            console.log("form", this.form);
            promoteAdd(this.form).then(res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "新增信息成功!"
                });
                this.nowPromoteload()
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg
                });
              }
            })
          } else if (this.mode == '编辑') {
            console.log("form", this.form);
            promoteRevise(this.form).then(res => {
              if (res.data.success) {
                this.$message({
                  type: "success",
                  message: "修改信息成功!"
                });
                this.nowPromoteload()
              } else {
                this.$message({
                  type: "error",
                  message: res.data.msg
                });
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    reset(row) {
      this.dialogpasswordVisible = true;
      this.passWord.id=row.id;
    },
    passwordsuer(ruleForm2) {
      this.$refs[ruleForm2].validate((valid) => {
        if (valid) {

          this.dialogpasswordVisible = false;
          restPromote(this.passWord).then(res => {
            if (res.data.success) {
              this.$message({
                type: "success",
                message: "重置密码成功!"
              });
              this.nowPromoteload()
            } else {
              this.$message({
                type: "error",
                message: res.data.msg
              });
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    onSubmit() {
      this.page.currentPage = 1;
      this.nowPromoteload()
    },
    recover(row, status, mode) {
      this.$confirm('此操作将'+mode+'该信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.state.id = row.id;
        this.state.status = status;
        promoteRevise(this.state).then(res => {
          if (res.data.success) {
            this.$message({
              type: "success",
              message: mode + "成功!"
            });
            this.nowPromoteload()
          } else {
            this.$message({
              type: "error",
              message: res.data.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    nowload(level) {
        this.loading = true,
          getLeadList('', level).then(res => {
          const data = res.data.data;
          this.lead = data;
          this.loading = false;
        });
    },
    nowPromoteload() {
      this.isActive = true
      console.log('this.formInline',this.formInline)
      this.loading = true,
        getPromoteLeadList(this.page.currentPage, this.page.pageSize, this.formInline, this.level).then(res => {
          this.isActive = false
          const data = res.data.data;
          console.log("res.data.data", res.data.data)
          this.page.total = data.total;
          this.tableData = data.records;
          this.loading = false;
        });
    },
    initprivacyMsg(){
      this.privacyMsg = ""
    }
  }
};
</script>

<style >
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.customWidthUser {
  width: 30%;
  background-color: #FFFFFF !important;
}
</style>
